 <template>
  <div>
    <tTable :columns="columns" :data="tableData">
      <!-- 交易金额 -->
      <template v-slot:operate="slotProps">
        <el-button
          type="warning"
          class="edit-style"
          @click="editPrice(slotProps.scope.row.id)"
          size="mini"
          slot="reference"
        >编辑价格</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>

    <el-dialog title="编辑价格" width="45%" :visible.sync="showVisible">
      <el-form :model="priceData" ref="priceData" label-width="100px">
        <el-form-item label="时长">
          <el-radio-group v-model="priceData.effectiveLengthUnit">
            <el-radio
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>
          <div>
            <el-input
              :disabled="priceData.effectiveLengthUnit === 'FOREVER'"
              style="width: 200px"
              v-model.number="priceData.effectiveLength"
              placeholder="请输入时长(仅数字)"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="价格"
          prop="amount"
          :rules="[{required: true, message: '请输入价格', trigger: 'blur'}]"
        >
          <el-input style="width: 200px" v-model="priceData.amount" placeholder="添加新的价格"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="add-style" size="small" @click="addPrice">添加</el-button>
        </el-form-item>
      </el-form>

      <hr>
      <tTable :columns="priceColumns" :data="priceList">
        <!-- 时长 -->
        <template v-slot:time="slotProps">
          <span
            v-if="slotProps.scope.row.effectiveLengthUnit !== 'FOREVER'"
          >{{slotProps.scope.row.time}}</span>
          <span v-else>永久</span>
        </template>
        <!-- 价格 -->
        <template v-slot:amount="slotProps">￥{{slotProps.scope.row.amount}}</template>
        <!-- 操作 -->
        <template v-slot:operate="slotProps">
          <el-button
            size="mini"
            type="danger"
            @click="removeCategory(slotProps.scope.row.id)"
            icon="el-icon-close"
            circle
          ></el-button>
        </template>
      </tTable>

    </el-dialog>
  </div>
</template>

<script>
import { getOrganizationById, selectOrganization } from "api/getData";
import {
  creatPrice,
  getAllPriceByOrgId,
  deletePrice,
  updatePrice
} from "api/course";
import { formatDateTime, tanslateTime } from "src/util/time.js";
import { dataOptions } from "src/util/time";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [], // 企业信息列表
      searchData: "",

      showVisible: false, // 显示修改价格的dialog
      priceData: {
        amount: "",
        courseId: "",
        effectiveLength: "",
        effectiveLengthUnit: "DAY"
      }, // 新的价格
      timeOptions: dataOptions,
      priceList: [], // 价格列表

      total: 0,
      priceColumns: [
        {
          slot: "time",
          attr: { prop: "time", label: "时长" }
        },
        {
          slot: "amount",
          attr: { prop: "amount", label: "价格" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "150" }
        }
      ],

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "infoName", label: "机构名称" }
        },
        {
          attr: { prop: "phone", label: "管理员电话" }
        },
        {
          attr: { prop: "email", label: "管理员邮箱" }
        },
        {
          attr: { prop: "inviteCode", label: "机构码", width: "100" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "150" }
        }
      ]
    };
  },
  components: { Pagination, tTable },

  mounted() {
    this.courseId = this.$route.params.id;
    this.priceData.courseId = this.courseId;

    this.getData(1);
  },
  methods: {
    getData(pageNumber) {
      getOrganizationById(pageNumber, this.courseId).then(res => {
        this.tableData = res.content;
        this.total = res.totalElements;
      });
    },
    search: function() {
      selectOrganization(this.searchData).then(res => {
        this.tableData = res.content;
        this.total = res.totalElements;
      });
    },
    editPrice(id) {
      this.priceData.ownerOrgId = id;
      this.showVisible = true;

      this.getPrice(id);
    },
    removeCategory(id) {
      this.$confirm("确认删除该项价格么？")
        .then(_ => {
          deletePrice(id).then(res => {
            this.$message.success("删除成功");
            this.getPrice();
          });
        })
        .catch(_ => {});
    },
    addPrice() {
      this.$refs.priceData.validate(val => {
        if (val) {
          let priceData = this.priceData;

          if (priceData.effectiveLengthUnit === "FOREVER") {
            delete priceData.effectiveLength;
          }

          creatPrice(priceData).then(res => {
            this.$message.success("添加成功");
            this.getPrice();
          });
        } else {
          return false;
        }
      });
    },
    getPrice() {
      getAllPriceByOrgId(this.priceData.ownerOrgId).then(res => {
        this.priceList = res.map(item => {
          item.time = tanslateTime(
            item.effectiveLength,
            item.effectiveLengthUnit
          );
          return item;
        });
      });
    },
    // 翻页
    handleChange: function(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.tabList {
  @include fj(flex-start);

  .tabItem {
    padding-left: 20px;
  }
}
.coverImg {
  width: 100px;
  height: 100px;
}
</style>
